<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理系统</title>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7/css/bootstrap.css">
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->

    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../lib/element-ui/element-ui-2.8.2.css">

    <style>

        #aside {

            transition: all 500ms;
            user-select: none;

        }

        #logo {
            transition: all 500ms;

        }

        .avatar_img {

            width: 200px;
            height: 200px;
            border-radius: 100px;
        }

        .img_icon {
            border-radius: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background: #f5f7fa;
            color: #909399;
            font-size: 50px;
        }

        iframe {

            width: 100%;
            height: 748px;
            border: 0px;
            transition: all 500ms;
        }

        .footer {

            display: none;
        }

        .el-tag {
            display: inline-block;
            margin-left: 39%;
            margin-top: 10px;
        }

        .el-menu--collapse {
            transition: all 500ms;
        }

        input[type=file] {
            display: none;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .el-image__inner {
            border-radius: 300px;
        }


    </style>
</head>
<body>

<div id="app">


    <el-container style="height: 969px;">

        <!--侧边栏-->
        <el-aside id="aside" style="background-color: rgb(238, 241, 246)">

            <el-header height="200px" style="padding: 10px 25%" justify="space-between">

                <!--                                <div id="logo" @click.prevent="Switchollapse"-->
                <!--                                     style="border-radius: 350px;width: 150px;height: 150px;margin: 0px auto; background-color: #1b6d85">-->

                <!--                                </div>-->

                <!--                <img  style="border-radius: 350px;width: 150px;height: 150px;margin: 0px auto;"-->
                <!--                      :src="avatar_img_url"-->
                <!--                      alt="头像">-->

                <el-image
                        style="border-radius: 350px;width: 150px;height: 150px;margin: 0 auto"
                        :src="avatar_img_url"
                >

                    <div slot="placeholder" class="img_icon">

                        <i class="el-icon-loading"></i>
                    </div>

                    <div slot="error" class="img_icon">

                        <i class="el-icon-picture-outline-round"></i>

                    </div>

                </el-image>


                <el-tag>{{currentUserName}}</el-tag>
            </el-header>


            <el-menu :unique-opened="isOpened" :collapse="isCollapse" v-for="firstMenu in menuData ">

                <el-submenu>

                    <template slot="title">

                        <i :class="firstMenu.icon"></i>
                        <span slot="title">{{firstMenu.funcName}}</span>
                    </template> <!--一级菜单-->

                    <el-menu-item-group v-for="secondMenu in firstMenu.childFunc">
                        <el-menu-item
                                @click="addTab(secondMenu.funcName,secondMenu.funcUrl,secondMenu.funcId)"
                        >
                            <i :class="secondMenu.icon"></i>
                            <span>{{secondMenu.funcName}}</span>
                        </el-menu-item>
                    </el-menu-item-group>

                </el-submenu>
            </el-menu>
        </el-aside>


        <el-container>

            <!--头部-->
            <el-header style="background-color: #cccccc " class="text-right">

                <el-dropdown @command="handleCommand" trigger="click" style="position: relative;top: 20px;right: 20px;">
                  <span class="el-dropdown-link ">
                   <i class="fa fa-2x fa-cog"></i>
                  </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="myInfo" icon="el-icon-edit">我的资料</el-dropdown-item>
                        <el-dropdown-item command="setting" icon="el-icon-setting">设置</el-dropdown-item>
                        <el-dropdown-item command="logout" icon="el-icon-switch-button">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>


            </el-header>

            <!--主体-->
            <el-main>


                <el-tabs type="card" v-model="activeTab" closable @tab-remove="removeTab">
                    <el-tab-pane
                            v-for="(item, index) in tabs"
                            :key="item.name"
                            :label="item.title"
                            :name="item.name"
                    >

                        <iframe :src="item.content"></iframe>

                    </el-tab-pane>

                </el-tabs>


            </el-main>

            <el-footer style="background-color: #2E2D3C">

                <span style="float: right;color: #409EFF;margin-top: 20px">Copyright © 2019 杨兴鹏</span>

            </el-footer>

        </el-container>
    </el-container>

    <el-dialog
            :append-to-body=true
            :visible="dialogVisible"
            title="我的资料"

            @close="changDialogState"

    >

        <el-row type="flex" justify="space-between">
            <el-col :span="6" :offset="2">


                <div class="avatar_img">
                    <el-upload
                            class="avatar-uploader"
                            action=""
                            :http-request="uploadAvatar"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="avatar_img_url !== '' && !isUpload"
                             class="avatar_img"
                             :src="avatar_img_url"
                             title="点击上传头像"
                        >

                        <el-progress
                                v-if="isUpload"
                                type="circle"
                                :percentage="uploadPercentage"
                        >

                        </el-progress>


                        <i v-if="avatar_img_url == ''" class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                </div>

            </el-col>

            <el-col :span="6">


            </el-col>


        </el-row>

        <!--        <span slot="footer">-->

        <!--            <el-button @click="changDialogState"> 取消</el-button>-->
        <!--            <el-button> 确定</el-button>-->
        <!--        </span>-->

    </el-dialog>
</div>
</body>
</html>

<script src="../lib/jQuery-3.31/jquery-3.3.1.js"></script>
<script src="../lib/vue/vue.js"></script>
<script src="../lib/element-ui/element-ui.js"></script>
<script src="../lib/vue/axios-0.18.js"></script>
<script>


    var app = new Vue({

        el: "#app",
        data: {
            isCollapse: false,//菜单是否可以展开关闭
            tabIndex: 2,
            tabs: [
                {
                    title: '首页',
                    name: '1',
                    // content: 'https://gradient.shapefactory.co/'
                    context: ''
                }

            ],

            isOpened: true, //是否只允许一个菜单下拉

            iconClass: '',
            menuData: [],
            activeTab: '1',  //当前激活的tab

            currentUserName: '',
            dialogVisible: false,
            avatar_img_url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',

            uploading: false,
            uploadPercentage: 0


        },
        methods: {

            addTab: function (funcName, funcUrl, funcId) {
                if (JSON.stringify(this.tabs).indexOf(funcId) === -1) {
                    this.tabs.push({
                        title: funcName,
                        name: funcId,
                        content: funcUrl

                    });
                }
                this.activeTab = funcId;


            },
            removeTab(id) {

                for (let i = 0; i < this.tabs.length; i++) {

                    if (id === '1') { //首页不能删除

                        app.$message.warning("别点了，首页不能关闭！")

                        return;
                    }

                    if (this.tabs[i].name === id) { //当数组中的name等于传过来的值时

                        this.tabs.splice(i, 1);


                        if (this.activeTab === id) {//激活页被关闭
                            this.activeTab = this.tabs[i - 1].name;
                        }

                        // this.activeTab = this.tabs[i - 1].name;   //激活右边元素
                    }

                }

            },

            Switchollapse: function () {

                // this.isCollapse = !this.isCollapse;

                if (this.isCollapse === true) {

                    // $('#aside').css("width","65px");
                    //  $('#logo').fadeOut(300);
                    $('aside').css('width', '60px')
                    this.isCollapse = false;
                } else {

                    // $('#logo').fadeIn(300);
                    $('aside').css('width', '360px')

                    this.isCollapse = true;
                }


            },

            handleCommand: function (command) {

                if (command === "myInfo") {

                    if (sessionStorage.getItem('currentUserId') == null) {

                        app.$message.error("未登录");
                        return
                    }

                    app.dialogVisible = true
                }

                //点击“退出”时
                if (command === "logout") {
                    app.$msgbox({
                        title: '消息',
                        type: 'warning',
                        message: '您确定退出系统吗?',
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        closeOnClickModal: false,
                        roundButton: true,
                        beforeClose: function (action, instance, done) {
                            if (action === 'confirm') {
                                app.logout();
                            } else {
                                done()
                            }
                        }
                    })
                }
                if (command === "setting") {

                    this.$confirm('<input />', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        dangerouslyUseHTMLString: true,
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }


            },

            /**
             * 退出的ajax请求
             */
            logout() {
                $.ajax({
                    url: "/logout",
                    type: 'get',
                    dataType: 'json',
                    success: function (result) {
                        if (result.success === true) {
                            window.location.href = "/loginPage"
                        } else {

                            app.$notify.warning({
                                title: '提示',
                                message: result.msg

                            })

                        }
                    }

                })

            },


            changDialogState: function () {
                app.dialogVisible = false
            },


            uploadAvatar(fileObj) {


                let userId = sessionStorage.getItem('currentUserId');
                const formData = new FormData();
                formData.append('file', fileObj.file);
                formData.append('type', fileObj.file.type);

                $.ajax({

                    url: 'user/avatar/'+userId,
                    type: 'post',
                    data: formData,
                    // 告诉jQuery不要去处理发送的数据
                    processData : false,
                    // 告诉jQuery不要去设置Content-Type请求头
                    contentType : false,

                    beforeSend: function(){

                        app.uploading = true;
                    },
                    success: function (result) {

                        console.log(result);

                    }

                })


                // axios({
                //     url: 'user/avatar/'+userId,
                //     method: 'post',
                //     data: formData,
                //     onUploadProgress: progressEvent => {
                //         console.log(progressEvent);
                //         const complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
                //         fileObj.onProgress({percent: complete})
                //     },
                // }).then().catch((result)=>{
                //     console.log(result);
                // })
            }

        },

        created: function () {


            $.ajax({

                url: '/const/getCurrentUsername',
                type: 'get',
                success: function (result) {

                    if (result.success === true) {

                        app.currentUserName = result.data.name;
                        sessionStorage.setItem("currentUserId", result.data.userId);
                    }

                }


            }),

                getData()

        },


    });
    window.onfocus = function () {
        document.title = '写申请';
    };
    window.onblur = function () {
        document.title = '你把申请给我交了';
    };

    function getData() {
        $.ajax({

            url: "/const/funcTree",
            type: 'get',
            dataType: 'json',
            success: function (result) {

                if (result.success === true) {

                    for (let menus of result.data) {

                        for (let childMenus of menus.childFunc) {

                            if (childMenus.funcId == "21") {

                                childMenus.funcUrl = "/druid/index.html"
                                app.menuData = result.data;
                                return;
                            }
                            if (childMenus.funcId == '28') {
                                childMenus.funcUrl = "/swagger-ui.html"
                                app.menuData = result.data;

                            }
                        }
                    }

                    app.$notify({

                        title: "提示",
                        message: result.msg,
                        type: 'success'

                    })
                }


            }

        });
    }

    let ws = null;
    if ('WebSocket' in window) {

        ws = new WebSocket("ws://127.0.0.1:8080/webSocket/" + sessionStorage.getItem("currentUserId"));
    } else {

        app.$message.error("你的浏览器不支持WebSocket");
    }
    ws.onopen = function (e) {

        console.log("打开连接");
    }
    ws.onmessage = function (e) {

        app.$message.success(e.data);
    }

    ws.beforeUpload = function (e) {
        console.log("关闭连接");
    }


</script>